<template>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
    :before-close="() => $emit('handleClose')"
  >
    <!-- <span>This is a message</span> -->
    <el-form v-model="pageData.formData">
      <el-form-item label="选择角色">
        <el-select multiple v-model="pageData.formData.role">
          <el-option
            v-for="item in pageData.roleList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="$emit('handleClose')">取消</el-button>
        <el-button type="primary" @click="doSubmit">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { GET_ROLE_LIST } from '@/api/role'
import { reactive } from 'vue'
interface IRes {
  list: IRole[]
}
interface IRole {
  id: string
  roleName: string
}
interface IPage {
  roleList: IRole[]
  formData: {
    [key: string]: string
  }
}
const dialogVisible = true
const { userId } = defineProps(['userId'])
const emits = defineEmits(['handleClose'])
const doSubmit = () => {
  //构造添加用户接口使用的参数
  // let params = {
  //   name: ''
  // }
  //调用添加用户的接口
  emits('handleClose', true)
}
const pageData = reactive<IPage>({
  roleList: [],
  formData: {
    role: ''
  }
})
const getRoleList = async () => {
  const res: unknown = await GET_ROLE_LIST({})
  pageData.roleList = (res as IRes).list
}
const getDetail = () => {
  console.log(userId)
}
getRoleList()
getDetail()
</script>

<style></style>
